<a class="rstblock"
  [ngClass]="{'rstblock-closed': products[index].zpfxs === '0' && products[index].zdsxs === '0' && products[index].zlsxs === '0' && products[index].zgmxs === '0'}">
  <div class="rstblock-logo">
    <a *ngIf="products[index].pic" (click)="emitGallery()" class="img-thm img-thm__zoom-in">
      <i class="img-thm__mask"></i>
      <i nz-icon nzType="search" nzTheme="outline" class="img-thm__icon">
        <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="search" aria-hidden="true">
          <path
            d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
          </path>
        </svg>
      </i>
      <img class="rstblock-logo-icon img-thm__img" [src]="products[index].url">
      <div *ngIf="products[index].isCm === '1' || products[index].isCmAll === '1'"
        class="elemeicon elemeicon-premiumsign rstblock-logo-premiumsign"></div>
    </a>
    <!-- 无图 -->
    <div *ngIf="!products[index].pic" style="background: #e6e6e6; width: 140px; height: 84px; line-height: 84px;">无图片
      <div *ngIf="products[index].isCm === '1' || products[index].isCmAll === '1'"
        class="elemeicon elemeicon-premiumsign rstblock-logo-premiumsign" style="top:20px; right: 20px;"></div>
    </div>
    <!-- 色号选择 -->
    <span *ngIf="mode===false" style="font-size: 14px;">
      <a (click)="pre()"><i nz-icon nzType="left-circle" nzTheme="outline"></i></a>
      <span style="color: #eb544a; width: 30px; display: inline-block">{{index + 1}}</span>/<span
        style="width: 30px; display: inline-block">{{products.length}}</span>
      <a (click)="next()"><i nz-icon nzType="right-circle" nzTheme="outline"></i></a>
    </span>
  </div>
  <div (click)="emitDetail()" class="rstblock-content">
    <div class="rstblock-title" nz-popover [nzPopoverContent]="contentTemplate" nzMouseEnterDelay="0.5"
      (nzVisibleChange)="visibleChange(index, $event)" nzPopoverPlacement="right">{{products[index].productCd}}</div>
    <div class="rstblock-cost">{{products[index].brand}}</div>
    <div class="rstblock-cost">{{products[index].year}} {{products[index].useGroup}}</div>
    <!-- <div class='rstblock-schedule'>可下单</div> -->
    <div
      *ngIf="products[index].zpfxs === '0' && products[index].zdsxs === '0' && products[index].zlsxs === '0' && products[index].zgmxs === '0'"
      class="rstblock-relaxing">
      产品已下架</div>
    <div class="rstblock-activity">
      <i *ngIf="products[index].zpfxs === '1'" nz-tooltip nzTooltipTitle="批发有售"
        style="background:#fff;color:#0f8cbd;border:1px solid;padding:0;">批</i>
      <i *ngIf="products[index].zdsxs === '1'" nz-tooltip nzTooltipTitle="电商有售"
        style="background:#fff;color:#d2b51f;border:1px solid;padding:0;">电</i>
      <i *ngIf="products[index].zlsxs === '1'" nz-tooltip nzTooltipTitle="零售有售"
        style="background:#fff;color:#ca2222;border:1px solid;padding:0;">零</i>
      <i *ngIf="products[index].zgmxs === '1'" nz-tooltip nzTooltipTitle="国贸有售"
        style="background:#fff;color:#101bab;border:1px solid;padding:0;">国</i>
    </div>
  </div>
</a>
<ng-template #contentTemplate>
  <div class="rstpopover">
    <div class="rstpopover-title">{{products[index].productCd}}
      ({{products[index].style + '-' + products[index].colorCd}})
    </div>
    <div class="rstpopover-flavors">{{products[index].brand}}</div>
    <ul class="rstpopover-activities">
      <li *ngIf="products[index].extraDTO">
        <i style="background: #fff; color: #999;border: 1px solid;padding: 0">框</i>
        <span style="padding-right: 8px;"
          [ngClass]="{'text-red': products[index].extraDTO.zjkcz === ''}">{{products[index].extraDTO.zjkcz || '未维护材质'}}</span>
        <span style="padding-left: 8px;border-left: 1px solid #ddd"
          [ngClass]="{'text-red': products[index].extraDTO.zjkys === ''}">{{products[index].extraDTO.zjkys || '未维护颜色'}}</span>
      </li>
      <li *ngIf="products[index].extraDTO">
        <i style="background: #fff; color: #999;border: 1px solid;padding: 0">片</i>
        <span style="padding-right: 8px;"
          [ngClass]="{'text-red': products[index].extraDTO.zjpcz === ''}">{{products[index].extraDTO.zjpcz || '未维护材质'}}</span>
        <span style="padding-left: 8px;border-left: 1px solid #ddd"
          [ngClass]="{'text-red': products[index].extraDTO.zjps === ''}">{{products[index].extraDTO.zjps || '未维护颜色'}}</span>
      </li>
      <li *ngIf="products[index].extraDTO">
        <i style="background: #fff; color: #999;border: 1px solid;padding: 0">腿</i>
        <span style="padding-right: 8px;"
          [ngClass]="{'text-red': products[index].extraDTO.zjjcz === ''}">{{products[index].extraDTO.zjjcz || '未维护材质'}}</span>
        <span style="padding-left: 8px;border-left: 1px solid #ddd"
          [ngClass]="{'text-red': products[index].extraDTO.zjtys === ''}">{{products[index].extraDTO.zjtys || '未维护颜色'}}</span>
      </li>
    </ul>
    <nz-tabset nzSize="small">
      <nz-tab [nzTitle]="'库存'">
        <ul class="rstpopover-delivery">
          <li>限制库存</li>
          <li>{{products[index].stockDTO ? products[index].stockDTO.limitStock : 0}}</li>
        </ul>
        <ul class="rstpopover-delivery">
          <li>定制库存</li>
          <li>{{products[index].stockDTO ? products[index].stockDTO.cmStock : 0}}</li>
        </ul>
        <span
          style="color: #ccc; font-size: 12px;">库存更新于：{{products[index].stockDTO ? (products[index].stockDTO.updateTime ? products[index].stockDTO.updateTime : products[index].stockDTO.createTime) : ''}}</span>
      </nz-tab>
      <nz-tab [nzTitle]="'价格'">
        <ul class="rstpopover-delivery">
          <li>结算价</li>
          <li>{{products[index].priceDTO ? products[index].priceDTO.tradePrice : 0}}</li>
        </ul>
        <ul class="rstpopover-delivery">
          <li>批发价</li>
          <li>{{products[index].priceDTO ? products[index].priceDTO.retailPrice : 0}}</li>
        </ul>
        <ul class="rstpopover-delivery">
          <li>市场价</li>
          <li>{{products[index].priceDTO ? products[index].priceDTO.marketPrice : 0}}</li>
        </ul>
        <ul class="rstpopover-delivery">
          <li>KA价</li>
          <li>{{products[index].priceDTO ? products[index].priceDTO.kaPrice : 0}}</li>
        </ul>
      </nz-tab>
    </nz-tabset>
  </div>

</ng-template>
